{extend name="./tpl/default/mobile/public/layout.html" /}
{block name="header"}
<link rel="stylesheet" href="/public/home/mobile/css/member/set.css">
<link rel="stylesheet" href="/public/plugins/dropload/dropload.css">
{/block}
{block name="head"}
<div class="am-g" style="font-size:20px;">
    <div class="am-u-sm-5">
        <a href="{:url('/home/User/index')}"><span class="icon iconfont icon-xiangzuojiantou"></span></a>
    </div>
    <div class="am-u-sm-6" style="margin-right: 30px;">
        我的收藏
    </div>
</div>
<hr style="border:1px solid #e0e0e0;margin: 0px;">
{/block}
{block name="body"}
<div data-am-widget="tabs"
     class="am-tabs am-tabs-default">
    <ul class="am-tabs-nav am-cf">
        <li class="am-active" onclick="setOrder(-1,this)"><a>商品收藏</a></li>
        <li class="" onclick="setOrder(1,this)"><a>资讯收藏</a></li>

    </ul>
    <div class="am-tabs-bd" style="border: none;">
        <div data-tab-panel-0 class="am-tab-panel am-active">
            <div class="am-g" style="margin-top: 20px;text-align: center" id="list">

            </div>
        </div>
    </div>
</div>
<div id="page"></div>
{/block}
{block name="script"}
<script src="/public/plugins/template/template.js"></script>
<script src="/public/plugins/dropload/dropload.min.js"></script>
<script type="text/html" id="goods-tpl">
    {{ each data as value index}}
    <div class="am-u-sm-6">
        <div class="am-thumbnail">
            <img src="{{ value.goods_thumb}}" alt=""/>
            <h3 class="am-thumbnail-caption">{{ value.fulltitle}}</h3>
            <h3 class="am-thumbnail-caption">￥ <b style="color: #c30d23;">{{ value.simple_price}}</b>/{{ value.goods_unit}}</h3>
        </div>
    </div>
    {{ /each}}
</script>
<script type="text/html" id="cms-tpl">

    {{ each data as value index}}
    <div class="am-u-sm-4">
        <img src="{{ value.thumb}}" style="width: 100px;" alt="">
    </div>
    <div class="am-u-sm-8">
        <div class="am-g" style="margin-top: 30px;">
            <div class="am-u-sm-12">
                <button class="am-btn  am-btn-xs" style="background:#424242;">
                    <a href="" style="color: #ffffff">{{ value.author}}</a>
                </button>
                {{ value.title}}
            </div>
            <div class="am-u-sm-12">
                {{ value.create_time}}
            </div>
        </div>
    </div>

    {{ /each}}
</script>
<script>
    var datas = {
        channel: '-1',
        page: 1
    };
    var drop = $('#page').dropload({  //定义检测的容器
        scrollArea: window,
        loadDownFn: function (me) {		//loadDownFn是检测是否加载下方，其余方向请到文档中查看
            datas.page++;			//每次都需要将页码加1
            // 拼接HTML
            $.ajax({
                type: 'POST',
                url: '{:url("favoriteList")}', data: datas, success: function (data) {
                    if (data.code == 0) {
                        layer.open({
                            content: data.msg
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    if (datas.channel == -1) {
                        var html = template('goods-tpl', data);		//此处使用的是上章节介绍的模板引擎
                    } else {
                        var html = template('cms-tpl', data);		//此处使用的是上章节介绍的模板引擎
                    }
                    $('#list').append(html);		//将生成好的html插入放置列表的容器内
                    if (datas.page >= datas.last_page) {		//检测是否加载到最后一页
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    me.resetload();			//这句必须写
                }
            });

        }
    });

    function setOrder(type, obj) {
        datas.page = 0;
        datas.channel = type;
        $(obj).addClass('active').siblings().removeClass('active');
        $('#list').empty();
        drop.unlock();
        drop.noData(false);
        drop.resetload();
    }
</script>
{/block}
